<template>
  <div class="container animated fadeIn">
    <div class="content box box-ver">
      <div class="box-f1"></div>
      <div class="header box">
        <div @click="cancelPick" class="btn">取消</div>
        <div class="box-f1"></div>
        <div @click="updateShop" class="btn">确定</div>
      </div>
      <mt-picker :visibleItemCount="7" :itemHeight="itemHeight" class="picker" :slots="shopList" @change="changeShop"></mt-picker>
    </div>
  </div>
</template>

<script>
import '../assets/css/mint.scss'
export default {
  name: 'shop-picker',
  data () {
    return {
      shopList: [
        {
          flex: 1,
          values: [
            '爱顿欧式餐厅',
            '安薇塔英系',
            '摆花街',
            '表叔茶餐厅',
            '冰火楼',
            '彼得家牧',
            '必胜客',
            '茶颜悦色',
            'CSA Code',
            'COVA',
            '稻香',
            '鹅夫人港',
            'Haagen Dazs',
            '鹿港小镇',
            '金牌外婆家',
            `L'SENNA`,
            '满记',
            '猫迹料理',
            'McDonald',
            '美味人生',
            'New York',
            'Open Ove',
            '青瓦炭',
            '鹊茶',
            '神虎拉面',
            '生龙清汤腩',
            '食悦天',
            '酥妃皇后',
            '台盖奶茶',
            '探鱼',
            '甜品工房',
            '丸龜制面',
            '伍厚德堂',
            '鲜芋仙',
            '星巴克',
            '湘爵士20',
            '炎铁烧',
            '壹零伍单威士忌俱乐部',
            '元气寿司',
            '云壹小小',
            '宇治茶铺',
            '知乎茶也'
          ],
          textAlign: 'center'
        }
      ],
      nowValue: null,
      itemHeight: Math.floor(document.documentElement.clientWidth / 7.5) * 0.8
    }
  },
  methods: {
    changeShop (picker, value) {
      this.nowValue = value
    },
    updateShop () {
      this.$emit('change', this.nowValue)
    },
    cancelPick () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
.container{
  position: fixed;
  z-index:888;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.3);
  .content{
    width:100%;
    height:100%;
  }
}
.picker{
  background-color:#FFF;
}
.header{
  background-color:#FFF;
  color:$themeColor;
  height:.88rem;
  .btn{
    padding:0 1.5rem;
    line-height:.88rem;
    font-size:.36rem;
  }
}
</style>
